<template>
    <div>
        <div class="classList">
            <!-- 绑定点击事件 -->
            <div v-for="item in classList" :key="item.courseId" @click.prevent="goDetail(item)" target='_blank'>
                <div>
                    <img :src="item.bannerFileUrlPc" alt="">
                    <div class="title">{{ item.courseTitle }}</div>
                    <div class="black">共{{ item.subSectionNum }}节课|{{ item.learningNum }}人报名</div>
                    <div class="green" v-if="item.isFree == 1">免费</div>
                    <div v-else-if="item.isDiscount == 1 && item.isFree == 0">
                        <span class="red">￥{{ item.discountPrice }}</span>
                        <span class="old-price"> {{ item.coursePrice }}</span>
                        <span class="desc">{{ item.discountDesc }}</span>
                    </div>
                    <div v-else>
                        <div class="red">￥{{ item.coursePrice }}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分页器 -->
        <a-pagination
            :current="currentPage"
            :page-size="pageSize"
            @change="handlePageChange"
            @showSizeChange="onShowSizeChange"
            show-size-changer
            :total="total"
            class="pagination"
            />
    </div>
</template>

<script>
import {getClassList} from '@/api/request'

export default {
    props: {
        queryParams: {
            type: Object,
            default: () => ({
                type: "",
                keyword: "",
                subjectId: "all", // 默认选择全部专题
                courseType: "all", // 默认选择全部课程方式
            })
        }
    },
    data() {
        return {
            classList: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
        };
    },
    components: {},
    methods: {
        goDetail(item) {
            console.log(item);
            // 跳转详情页
            this.$router.push({ 
                path: `/detail/${item.courseId}`,
                query: { courseId: item.courseId }
             }); 
        },
        fetchClassList() {
            console.log('接收到的课程类型:', this.queryParams.type);
            getClassList(this.queryParams.type, this.queryParams.keyword, {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                // ...(this.queryParams.courseType && { courseType: this.queryParams.courseType }),
                // ...(this.queryParams.subjectId && { subjectId: this.queryParams.subjectId })
                ...(this.queryParams.courseType && this.queryParams.courseType !== 'all' && { courseType: this.queryParams.courseType }),
               ...(this.queryParams.subjectId && this.queryParams.subjectId!== 'all' && { subjectId: this.queryParams.subjectId })
            }).then(res => {
                console.log(res);
                this.classList = res.courseList || []; 
                this.total = res.total || 0;
            }).catch(error => {
                console.error("获取课程列表失败:", error);
            });
        },
        handlePageChange(page, pageSize) {
            // console.log('触发 handlePageChange 方法');
            this.currentPage = page;
            this.pageSize = pageSize;
            this.fetchClassList();
        },
        onShowSizeChange(current, size) {
            // console.log('触发 onShowSizeChange 方法');
            this.pageSize = size;
            this.currentPage = 1;
            this.fetchClassList();
        }
    },
    created() {
        console.log('组件 created 钩子执行，准备调用 fetchClassList 方法');
        this.fetchClassList();
    },
    watch: {
        queryParams: {
            handler() {
                // 重置到第一页
                this.currentPage = 1; 
                this.fetchClassList();
            },
            deep: true // 深度监听对象变化
        }
    }
};
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}
.classList {
    width: 1200px;
    overflow: hidden;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    >div {
        width: 20%;
        position: relative;
        border-radius: 3px;
        overflow: hidden;
        padding: 7px 7px 10px;
        margin-bottom: 20px;
        cursor: pointer;
        box-sizing: border-box;
        >div {
           box-sizing: border-box; 
        }
    }
    img {
        width: 100%;
        height: 124px;
        border-radius: 8px; 
    }
    .green {
        color: #00cf8c;
        font-weight: bold;
        font-size: 16px
    }
    .black {
        color: #b7bbc4;
        height: 22px;
        font-weight: 500;
        font-size: 14px;
        margin-top: 6px;
    }
    .title{
        width: 100%;
        height: 22px;
        font-size: 15px;
        margin-bottom: 6px;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .red {
        color: #ff4500;
        font-weight: 500;
    }
    .old-price {
        color: #999!important;
        text-decoration: line-through;
        font-size: 12px;
        margin-left: 5px;
    }
    .desc {
        float: right;
        color: #fa8c16!important;
        background: #fff7e6;
        border: 1px solid #d9d9d9;
        border-color: #ffd591;
        // display: inline-block;
        padding: 0 7px;
        margin-right: 8px;
        font-size: 12px;
        line-height: 20px;
    }
}
.pagination {
    width: 1200px; 
    text-align: center;
    margin: 20px auto;
}
</style>